<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="/static/admin/css/default.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="/static/admin/easyui1.8.6/themes/default/easyui.css" />
  <link rel="stylesheet" type="text/css" href="/static/admin/easyui1.8.6/themes/icon.css" />
  <link rel="stylesheet" type="text/css" href="/static/admin/js/fancybox/source/jquery.fancybox.css" />
<!--  <script type="text/javascript" src="/static/admin/easyui1.8.6/jquery.min.js"></script>-->
  <script type="text/javascript" src="/static/admin/js/fancybox/lib/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/static/admin/easyui1.8.6/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="/static/admin/easyui1.8.6/locale/easyui-lang-zh_CN.js"></script>

  <script type="text/javascript" src="/static/admin/js/fancybox/source/jquery.fancybox.pack.js"></script>
</head>
<body>
<div id="toolbar">
  <a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">Add</a>
  <a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">Edit</a>
  <a class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">Help</a>
</div>
<table id="dataList"></table>
</body>
<script type="text/javascript">
  $('#dataList').datagrid({
    url:"{:url('admin/admin/index')}",
    singleSelect:true,
    pagination:true,
    rownumbers:true,
    toolbar:'#toolbar',
    columns:[[
      {field: 'avatar',title: '头像',align: 'center',formatter:function (val,row,index){
          if(val==null){
             return '-';
          } else {
            return '  <a class="fancybox-effects-c" href="' + val + '" title="头像预览">\n' +
                    '    <img src="' + val + '" style="width: 60px;height: 60px;" alt="测试">\n' +
                    '  </a>';
          }
        }},
      {field:'username',title:'账号',width:100},
      {field:'role_name',title:'角色',width:100,align:'left'},
      {field:'realname',title:'姓名',width:100,align:'left'},
      {field:'mobile',title:'手机',width:100,align:'left'},
      {field:'email',title:'邮箱',width:160,align:'left'},
      {field: 'status',title: '状态',width: 100,align: 'center',formatter:function (val,row,index){
          if(val==1){
            return '<span class="tag tag-success">正常</span>';
          } else {
            return '<span class="tag tag-danger">禁用</span>';
          }
        }},
      {field: 'create_time',title: '创建时间'},
      {field:'update_time',title:'上次更新',width:300,align:'left'},

    ]]
  });

  $(".fancybox-effects-c").fancybox({
    wrapCSS    : 'fancybox-custom',
    closeClick : true,
    openEffect : 'none',
    helpers : {
      title : {
        type : 'inside'
      },
      overlay : {
        css : {
          'background' : 'rgba(238,238,238,0.85)'
        }
      }
    }
  });


</script>
</html>